<template>
  <div>
    <div class="token1">ui token：--texticon-secondary-default</div>
    <div class="token2">ui token：--texticon-secondary1-default</div>
    <div class="text-14px--px">ignore pxtorem：only px，not transform to rem</div>
    <div class="text-14px">pxtorem：px => rem</div>
    <div class="tw-text-primary tw-text-center hover:tw-text-red-500">use tailwindcss</div>
    <div class="tw-w-3 tw-h-3 tw-bg-red-400"></div>
    <div class="tw-mt-md tw-w-3 tw-h-3 tw-bg-red-400 "></div>
  </div>
</template>

<script lang="ts" setup></script>

<style lang="less" scoped>
  .token1 {
    color: var(--texticon-secondary-default);
  }
  .token2 {
    color: var(--texticon-secondary1-default);
  }
  .text-14px--px {
    font-size: 14px;
  }
  .text-14px {
    font-size: 14px;
  }
</style>
